<template>
  <div class="ordersList">

    <div class="content">
      <el-row>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>线索列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="16">

          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.give_back_times" placeholder="返还线索">
            <el-option label="全部" value=""></el-option>

            <el-option label="返还2次以内" value="2"></el-option>
            <el-option label="返还3次以内" value="3"></el-option>
          </el-select>

          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.intention_level" placeholder="意向等级">
            <el-option label="全部" value=""></el-option>
            <el-option label="随便问问" value="low"></el-option>
            <el-option label="考虑中" value="middle"></el-option>
            <el-option label="高意向" value="high"></el-option>

          </el-select>
          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.shop_id" placeholder="选择店铺">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shop_name"
              :value="item.id">
            </el-option>

          </el-select>
          <el-date-picker
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-input style="width:200px" size="small" placeholder="按关键词进行搜索" v-model="vm.query.keyword" class="input-with-select">
            <el-button size="small" @click="query({reload:true})" slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <el-button size="small"  :disabled="!tids.length" type="primary" @click="dialogVisible = true,appiotMany=true">批量指派店铺</el-button>
          <el-dialog :visible.sync="dialogVisible">

            <mt-dialog :items="shops" name="shop_name" @change="changShop"></mt-dialog>

            <div slot="footer" class="dialog-footer">


              <el-button size="small"  @click="assign" type="success">指派</el-button>

              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
            </div>
          </el-dialog>

        </el-col>

      </el-row>

      <el-table
        :data="vm.models" ref="multipleTable"
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <!-- <template slot="empty">
          <div class="mt-loading"><i class="el-icon-loading"></i>
          </div>
        </template> -->

        <el-table-column

          prop="id"
          label="#"
          width="60">
        </el-table-column>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column

          prop="last_update"
          label="返还时间"
          >
        </el-table-column>
        <el-table-column
          label="客户头像"
          width="80"
          >
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.avatar" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column
         prop="name"
          label="客户姓名"
         width="90"
          >
        </el-table-column>
          <el-table-column
         prop="phone"
          label="客户电话"
         width="120"
          >

        </el-table-column>
          <el-table-column
         prop="model_name"
          label="意向车型"
          >

        </el-table-column>
          <el-table-column
         prop="shop_name"
          label="所属店铺"
          >

        </el-table-column>
          <el-table-column
         prop="give_back_times"
          label="返还次数"
         width="90"
          >

        </el-table-column>
        <el-table-column
          prop="intention_text"
          label="意向等级"
        >

        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          >
      <template slot-scope="scope">

          <router-link :to="{ name:'threadsEdit',params: { id: scope.row.id }}" append>
             <el-button type="primary" size="mini">

                详情
              </el-button>
            </router-link>
          <el-button @click="dialogVisible = true,appiotMany=false,tid=scope.row.id" size="mini">

            指派店铺
          </el-button>
      </template>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :current-page="vm.meta.page"
        layout="total,prev, pager, next"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//  todo 增加路由的参数,配置html5Mode ,导航方法封装
import Vue from "vue";
import * as Models from "@/api/threads";
import * as Shops from "@/api/shops";
import mtDialog from "@/components/DialogPicker";

export default {
  name: "threadsList",
  computed: {},

  components: {
    mtDialog
  },
  data() {
    return {
      vm: {
        models: [],
        isNull: false,
        isLoading: false,
        isError: false,
        meta: {},
        query: {}
      },
      shops: [],
      sid: 0,
      tids: [],
      tid: -1,
      dialogVisible: false,
      appiotMany: false,

    };
  },
  computed: {},
  mounted() {
    var that = this;
    this.query({ reload: true });
    Shops.query().then(function(res) {
      that.shops = res.pass_list;
    });
  },
  methods: {
    toggleSelection(rows) {
      var that = this;
      if (rows) {
        rows.forEach(function(row) {
          console.log(row);
          that.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        that.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      let _arr = [];
      val.forEach(function(t) {
        _arr.push(t.id);
      });

      this.tids = _arr;
      console.log(this.tids);
    },
    assign: function() {
      var that = this;
      var _q = {};
      _q.target_shop_id = that.sid;
      if (that.appiotMany) {
        _q.thread_ids = that.tids;
      } else {
        _q.thread_ids = [that.tid];
      }
      Models.assign(_q)
        .then(function(res) {
          that.dialogVisible = false;
          that.$message({
            message: "指派成功,刷新页面中",
            type: "success"
          });

          that.query({ reload: true });
        })
        .catch(function(message) {
          that.$message({
            message: message,
            type: "warning"
          });
        });
    },

    changShop: function(e) {
      this.sid = e;
    },

    _reset: function() {
      this.vm.query.page = 1;

    },
    query: function(config) {
      var that = this;

      if (config && config.reload) {
        that._reset();
      }
      that.vm.models = [];

      Models.query(that.vm.query)
        .then(function(data) {

          that.vm.models = data.models.map(a => {
            return Object.assign({}, a, {
              intention_text: Models._levelToText(a.intention_level)
            })
          });

          if (data.meta) {
            that.vm.meta = {
              page: data.meta.page * 1,
              size: data.meta.size * 1,
              total: data.meta.total * 1
            };
          }
        })
        .catch(function() {
          that.vm.isError = true;
        });
    },
    pageChange: function(e) {
      Vue.set(this.vm.query, "page", e);
      this.query();
    }
  }
};
</script>
